/**
* @description: 作业监控列表
* @author: 
* @data:
* @remark:
**/
<template>
	<view class="monit">
		<nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
			<img slot="iconfont" src="@/static/img/sx.png" alt="" @click="showSelectContent=true">
		</nav-bar>
		<ul class="menu">
			<li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
				<view class="right-box">
					<text class="menu-num" :class="{selectmenu:index === current}">{{ item.value }}</text>
					<text class="menu-state" :class="{selectmenu:index === current}">{{ item.title }}</text>
				</view>
				<view :class="{sj:index === current}"></view>
			</li>
		</ul>
		<view class="patrol-search">
			<van-search disabled show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
				placeholder="请输入" @click="showSearch=true" @cancel="onSearch('')" />
		</view>
		<view class="task-main">
			<view class="task-list-container">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-if="progressList.length > 0" v-model="isLoading" :finished="finished"
						finished-text="没有更多了" @load="loadMore">
						<view class="task-list" v-for="(item,index) in progressList" :key="index" @click="jump(item)">
							<view class="task-top">
								<img src="@/static/img/light.png" alt="">
								<text class="equip-title">{{ item.planName }}</text>
								<text :class="item.planStateName === '已完成' ?'equip-state-wc' :'equip-state-other'">
									{{ item.planStateName }}
								</text>
							</view>
							<hr class="patrol-hr">
							<ul class="task-list-main">
								<li>
									<text class="task-title">计划时间：</text>
									<text class="task-titles">{{ item.planStartTime + " - " +  item.planEndTime}}
									</text>
								</li>
								<li style="display: flex;justify-content:space-between;">
									<div style="flex:1;">
										<text class="task-title">作业负责人：</text>
										<text class="task-titles">{{ item.workDirectorName }}</text>
									</div>
									<div style="flex:1;">
										<text class="task-title">作业内容类型：</text>
										<text class="task-titles">{{ item.workContentTypeName }}</text>
									</div>
								</li>
								<li>
									<text class="task-title">作业站点：</text>
									<text class="task-titles">{{ item.workAdressName }}</text>
								</li>
							</ul>

						</view>

					</van-list>
					<van-empty v-else description="暂无数据" />
				</van-pull-refresh>
			</view>
		</view>
		<!--我发起的 筛选弹窗-->
		<van-popup v-model="showSelectContent" position="right" :style="{width:'80%'}">
			<select-content :subParam="subParam" @selectTimeClick="timeClick" @determine="selectContentDetermine"
				@selectContentClear="selectContentClear"></select-content>
		</van-popup>
		
		<!--弹出时间筛选弹窗使用-->
		<!-- <van-calendar v-model="showCalendar" type="multiple" color="#417ADC" @confirm="onDatetimeConfirm" /> -->
		<van-popup v-model="showCalendar" position="bottom" style="width: 100%;">
			<van-datetime-picker v-model="currentDate"  @cancel="showCalendar = false" type="date" title="选择年月日" @confirm="onDatetimeConfirm" />
		</van-popup>
	</view>

</template>

<script>
	import navBar from '../../../components/common/nav-bar.vue'
	import selectContent from '../../../pages/standardizedOperation/common/selectContent.vue'
	import { mapGetters } from "vuex";
    import { Toast } from 'vant';
	export default {
		name: "index",
		components: {
			navBar,
			selectContent
		},
		computed: {
			...mapGetters(["userData"])
		},
		onShow() {
			this.subParam.workDirectorId = this.userData.userId
			this.subParam.workDirectorName = this.userData.userName
		},
		onLoad() {
			this.myPlanData()
		},
		data() {
			return {
				backgroundColor: '#417ADC',
				title: '作业监控列表',
				showSelectContent: false, //筛选弹窗
				searchValue: '',
				current: 0, //我发起的 ZT = 0全部/ZT = 1未完成/ZT = 2已完成index
				refreshing: false, // 是否正在刷新
				showSearch: false,
				finished: false,
				isLoading: false,
				progressList: [], //我的任务列表数据
				menuList: [{
						title: "全部",
						value: 0,
						state: '2',
						ZT: 0
					},
					{
						title: "未完成",
						value: 0,
						state: '0',
						ZT: 1
					},
					{
						title: "已完成",
						value: 0,
						state: '1',
						ZT: 2
					}
				],
				subParam: {
					planStartTime: "",
					planEndTime: "",
					radio: "",
					workDirectorId: "",
					workDirectorName: "",
				},
				showCalendar: false, //时间弹窗
				timeSelectType: "" ,//筛选弹窗使用startTime，endTime
				currentDate: new Date(),
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			chooseMenu(item) {
				//String()防止0=false
				this.current = String(item.ZT) ? item.ZT : '';
				this.onRefresh()
			},
			onSearch(searchValue) {
				this.searchValue = searchValue
				this.onRefresh()
				this.showSearch = false
			},
			onRefresh() {
				this.refreshing = true
				this.finished = false
				this.page = 1
				this.progressList = []
				this.myPlanData()
			},
			loadMore() {
				if (this.total > this.progressList.length) {
					this.page = this.page + 1
					this.myPlanData()
				} else {
					this.finished = true
				}
			},
			jump(item) {
				uni.navigateTo({
					url: `/pages/standardizedOperation/assignmentDetails/assignmentDetails?id=${item.objId}&isMyInitiate=1`
				})
			},
			myPlanData() {
				//planState 0未完成 1已完成 全部=空 利用三目0=false赋值""
				// this.myPlanParam.planState = this.current ? this.current - 1 : ""
				// this.myPlanParam.workAdressName = this.searchValue
				// this.myPlanParam.userId = this.userData.userId
				this.myPlanParam = { //我发起的接口参数
						deptId: this.userData.deptId,
						workContentType: this.subParam.radio,
						startTime: this.subParam.planStartTime,
						endTime: this.subParam.planEndTime,
						planState: this.current ? this.current - 1 : "",
						workAdressName: this.searchValue
					},
					this.$apiRequest.bzhzyApi.selectMyPlan(this.myPlanParam).then(res => {
						this.refreshing = false
						this.progressList = res.data.planList

						this.menuList.map(item => {
							if (item.title == "全部") {
								item.value = res.data.tatolAll
							} else if (item.title == "未完成") {
								item.value = res.data.tatolIncomplete
							} else if (item.title == "已完成") {
								item.value = res.data.tatolComplete
							}
						})


					}).catch(error => {
						this.refreshing = false
					})
			},
			/**
			 * 时间弹窗
			 */
			timeClick(type) {
				this.showCalendar = true
				this.timeSelectType = type //startTime，endTime
			},
			/**
			 * 筛选条件确认
			 */
			selectContentDetermine() {
				this.showSelectContent = false
				this.onRefresh()
			},
			/**
			 * 筛选条件重置
			 */
			selectContentClear() {
				this.subParam = {
					planStartTime: "",
					planEndTime: "",
					radio: ""
				}
			},
			/**
			 * 时间弹窗确认
			 * @param {Object} date
			 */
			onDatetimeConfirm(date) {
				this.showCalendar = false;
				if(this.timeSelectType === 'startTime'){
					this.subParam.planStartTime = this.formatDate(date)
				}else {
					this.subParam.planEndTime = this.formatDate(date)
				}
				if(this.subParam.planEndTime && this.getTime(this.subParam.planEndTime) <this.getTime(this.subParam.planStartTime)){
					this.subParam.planEndTime = ''
					Toast('计划结束时间不能早于计划开始时间')
				}
				// if (date.length > 1) {
				// 	const [start, end] = date;
				// 	this.showCalendar = false;
				// 	this.subParam.planStartTime = this.formatDate(start)
				// 	this.subParam.planEndTime = this.formatDate(end)
				// } else {
				// 	const [start] = date;
				// 	this.showCalendar = false;
				// 	this.subParam.planStartTime = this.formatDate(start)
				// 	// this.subParam.planEndTime = this.formatDate(start)
				// }
			},
			formatDate(date) {
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
			},
			getTime(time){
				let date = new Date(time)
				return date.getTime()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.monit {
		background: #F2F6FA;
		width: 100vw;
		height: 100vh;

		.header {
			img {
				width: px2vw(48);
				margin-right: px2vw(40);
			}
		}

		.menu {
			width: px2vw(1020);
			height: px2vh(180);
			border: 1px solid #ffffff;
			border-radius: 10px;
			box-shadow: 0 0 18px 2px #fff inset;
			//background-image: url('../../../../static/img/borderR.png');
			background-color: rgba(243, 247, 255, 0.95);
			//background-size: px2vw(1020) px2vh(220);
			margin: px2vw(30) auto 0 auto;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			li {
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;

				.right-box {
					text-align: center;

					.menu-num {
						display: block;
						font-size: px2vw(54);
						font-weight: bold;
						color: #333;
					}

					.menu-state {
						font-size: px2vw(36);
						color: #333;
					}

					.selectmenu {
						color: #417adc;
					}
				}

				.sj {
					width: px2vw(78);
					height: px2vh(66);
					position: absolute;
					bottom: 0;
					//right: px2vw(40);
					left: 50%;
					transform: translate(-50%, 78%);
					//background-image: url('../../static/img/sj.png');
					background-size: px2vw(78) px2vh(66);
				}
			}
		}

		.task-main {
			height: calc(100vh - #{px2vh(530)});
			overflow: auto;
			position: relative;

			.task-list {
				width: px2vw(1020);
				padding-bottom: px2vh(30);
				//min-height: px2vh(416);
				//padding-bottom: px2vh(20);
				background: #fff;
				border-radius: px2vw(20) px2vh(20);
				margin-top: px2vh(30);
				margin-left: px2vw(30);
				margin-bottom: px2vh(30);

				.task-top {
					width: calc(100% - #{px2vw(80)});
					margin-left: px2vw(40);
					height: px2vh(140);

					img {
						width: px2vw(64);
						height: px2vw(64);
						margin-top: px2vh(40);
						float: left;
					}

					.equip-title {
						color: #333;
						font-size: px2vw(48);
						width: px2vw(670);
						height: px2vh(48);
						line-height: px2vh(48);
						float: left;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: px2vh(48);
						margin-left: px2vw(25);
					}

					.equip-state-wc,
					.equip-state-wzx,
					.equip-state-zxz,
					.equip-state-other,
					.equip-state-cx {
						display: flex;
						justify-content: center;
						align-items: center;
						width: px2vw(150);
						height: px2vh(50);
						font-size: px2vw(32);
						border-radius: px2vw(10);
						margin-top: px2vh(48);
						margin-left: px2vw(27);
						float: left;
						//text-align:center;
					}

					// 已完工/审批通过
					.equip-state-wc {
						color: #3cda68;
						background: rgba(60, 218, 104, 0.1);
					}

					// 未执行/待审批
					.equip-state-wzx {
						color: #ff7070;
						background: rgba(255, 112, 112, 0.1);
					}

					// 执行中/审批拒绝
					.equip-state-zxz {
						color: #ffad0e;
						background: rgba(255, 180, 0, 0.1);
					}

					.equip-state-other {
						color: #417ADC;
						background: rgba(65, 122, 220, 0.1);
					}

					// 已作废/已撤销
					.equip-state-cx {
						color: #999;
						background: #eee;
					}
				}

				.patrol-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
				}
			}

			.task-list-main {
				width: px2vw(940);
				//height: px2vh(266);
				margin-left: px2vw(40);
				padding-bottom: px2vh(30);

				li {
					margin-top: px2vh(30);
					font-size: px2vw(36);

					.task-title {
						color: #666;
					}

					.task-titles {
						color: #333;
					}
				}
			}

			.task-hr {
				width: px2vw(940);
				border: 0;
				border-bottom: px2vh(6) dashed #e5e5e5;
				margin-top: px2vh(14);
				margin-left: px2vw(40);
			}

			.by {
				position: absolute;
				width: px2vw(40);
				height: px2vh(40);
				border-radius: px2vw(100);
				left: px2vw(12);
				float: left;
				background: #f2f6fa;
			}

			.byr {
				position: absolute;
				width: px2vw(40);
				height: px2vh(40);
				border-radius: px2vw(100);
				right: px2vw(12);
				float: right;
				background: #f2f6fa;
			}

			.bottom-patrol {
				width: px2vw(940);
				height: px2vh(54);
				margin-left: px2vw(40);
				margin-top: px2vh(26);
				font-size: px2vw(32);

				.left-bottom-patrol {
					display: flex;
					justify-content: center;
					align-items: center;
					min-width: px2vw(300);
					padding: 2px 4px;
					//height: px2vh(54);
					background: #ecf1fb;
					float: left;
					text-align: center;
					color: #417adc;
					border-radius: px2vw(8);
				}

				.right-bottom-patrol {
					width: px2vw(120);
					height: px2vh(54);
					float: right;

					.patrol-btn {
						width: px2vw(120);
						height: px2vh(54);
						background: #417adc;
						float: right;
						//border-radius: px2vw(20);
					}

					/deep/ .van-button--normal {
						padding: 0;
					}
				}
			}
		}

		.patrol-search {
			width: px2vw(1020);
			height: 38px;
			margin: px2vw(20) px2vw(30);

			.van-search {
				padding: 0 0;
				height: 38px;
			}

			.van-search__content {
				background: #fff;
				height: 38px;
			}

			/deep/ .van-field__control {
				height: 30px;
			}
		}


	}
</style>
